<template>
  <div class="wrap">
    <!-- 头部区域 -->
    <div class="header">
      <div class="header_top">
        <div class="header_top_iconbox">
          <span class="iconfont">&#xe614;</span>
          <span class="txt">分类</span>
        </div>
        <img class="header_top_img" src="@/assets/topimg.gif">
        <div class="header_top_iconbox" @click="login">
          <span class="iconfont">&#xe600;</span>
          <span  class="txt">登录</span>
        </div>
      </div>
      <div class="header_searchbox">
        <div class="inputbox">
          <input type="text" placeholder="易购商城折扣无限">
          <span class="iconfont">&#xe622;</span>
        </div>
      </div>
    </div>
    <!-- 轮播图区域 -->
    <div class="swiper_wrap">
        <swiper class="swiper"
                :modules="modules"
                :slides-per-view="1"
                :space-between="50"
                :autoplay="{
                  delay:2000,
                  disableOnInteraction: false,
                }"
                :pagination="{ clickable: true }"
              >
          <swiper-slide>
            <img src="@/assets/swiperimg1.jpg" >
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/swiperimg2.jpg" >
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/swiperimg3.jpg">
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/swiperimg4.jpg">
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/swiperimg5.jpg">
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/swiperimg6.jpg">
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/swiperimg7.jpg">
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/swiperimg8.jpg">
          </swiper-slide>
        </swiper>
    </div>
    <!-- 核心内容区域 -->
    <div class="main">
      <div class="banner">
        <img src="@/assets/bannerimg1.gif">
        <img src="@/assets/bannerimg2.gif">
        <img src="@/assets/bannerimg3.gif">
      </div>
      <div class="iconlist">
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg4.png">
          <span>苏宁家电</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg1.png">
          <span>苏宁超市</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg2.png">
          <span>苏宁宜品</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg3.png">
          <span>手机数码</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg5.png">
          <span>家居家装</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg6.png">
          <span>服饰百货</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg7.png">
          <span>生活家电</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg8.png">
          <span>签到有礼</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg9.png">
          <span>领券中心</span>
        </div>
        <div class="iconlist_item">
          <img src="@/assets/iconitemimg10.png">
          <span>更多频道</span>
        </div>
      </div>
      <p class="title_love">
        <img src="@/assets/love.png">
      </p>
      <div class="shoplist">
        <div class="shoplist_item" v-for="(item,index) in shopdata" :key="index" @click="linkdetail" :data-goodsid="item.goods_id">
          <img :src="item.img_big_logo">
          <p>{{item.title}}</p>
          <div class="cuxiao">
            <span v-if="item.is_sale">特价</span>
            <span class="hot" v-if="item.is_hot">热销</span>
          </div>
          <div class="moneybox">
            <span class="current_price">￥{{item.current_price}}</span>
            <span class="price" v-if="item.is_sale">￥{{item.price}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 悬浮红包 -->
    <div class="red_packet">
      <img src="@/assets/Red_packet.gif">
    </div>
  </div>
  <FooterTab :pagename="pagename"></FooterTab>
</template>
<script>
  // 引入swiper和样式
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import 'swiper/css';
  // 引入swiper新功能
  import { Autoplay,Pagination } from 'swiper';
  import 'swiper/css/pagination'
  // 引入axios
  import axios from 'axios';
  // 引入ref
  import { ref } from 'vue';
  // 引入全局组件FooterTab
  import FooterTab from '../../components/FooterTab' 
  import { useRouter } from 'vue-router';

  // 获取商品列表的方法
  const GetshopData = ()=>{
    // shopdata变成一个响应对象
    const shopdata = ref([]) 
    const getdata = async ()=>{
      const  res = await axios({
        methods: "get",
        url: "http://localhost:8888/goods/list",
      })
      shopdata.value = res.data.list
    }
    return { getdata, shopdata }
  }

  // 跳转登录页面
  const Login = ()=>{
    const router = useRouter() 
    const login = ()=>{
      router.push('/login')
    }
    return {login}
  }

  // 点击跳转商品详情
  const Linkdetail = ()=>{
    const router = useRouter() 
    const linkdetail = (e)=>{
      const goodsid = e.currentTarget.dataset.goodsid
      router.push({name:"detail",query:{goodsid}})
    }
    return { linkdetail }
  }

  export default {
    name: 'HomeView',
    components: {
      Swiper,
      SwiperSlide,
      FooterTab
    },
    setup () {
      // 标记当前页面
      const pagename = 'home'
      // 引用获取商品的函数
      const { getdata , shopdata } = GetshopData()
      getdata()
      // 登录
      const { login } = Login()
      // 商品详情
      const { linkdetail } = Linkdetail()
      return { modules: [Autoplay, Pagination], shopdata, login, linkdetail, pagename} 
    }
  }
</script>

<style scoped lang="scss">
.header {
  height: .9rem;
  background-color: #f46722;
  background-image: url(@/assets/swiperimg.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0rem -0.398rem;
  padding-top: .04rem;
  box-sizing: border-box;
  &_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .45rem;
    padding: 0 .085rem;
    // 样式嵌套
    &_iconbox {
      display: flex;
      flex-direction: column;
      text-align: center;
      color: white;
      .iconfont {
        font-size: .20rem;
      }
      .txt {
        font-size: .12rem;
        transform: scale(0.8); //字体缩放
      }
    }
    &_img {
      width: 1.85rem;
      height: .36rem;
    }
  }
  &_searchbox {
    height: .31rem;
    padding-top: .02rem;
    .inputbox {
      position: relative;
      width: 3.5rem;
      height: .32rem;
      margin: 0 auto; //水平居中
      background-color: white;
      border-radius: .15rem;
      overflow: hidden;  // 隐藏input多余部分
      input {
        width: 80%;
        height: 100%;
        border: none;
        text-indent: .34rem;
      }
      .iconfont {
        font-size: .2rem;
        color: #ccc;
        position: absolute;
        left: .10rem;
        top: 50%;
        //图标垂直居中
        transform: translateY(-50%); 
      }
    }
  }
} 
.swiper_wrap {
  height: 1.15rem;
  background-image: linear-gradient(rgb(247, 177, 133),rgba(255,0,0,0));
  .swiper {
    width: 3.52rem;
    height: 1.15rem;
    position: relative;
    overflow: hidden;
    border-radius: .1rem;
    img {
      width: 3.52rem;
      position: absolute;
      top: -50%;
    } 
  }
} 
.main {
  background-color: #f7f7f7;
  .banner {
    display: flex;
    justify-content: center;
    img {
      width: 33.3%;
      height: auto;
      display: block;
    }
  }
  .iconlist {
    padding: .05rem 0;
    width: 3.6rem;
    height: 1.625rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around; // 垂直方向均分
    &_item {
      display: flex;
      flex-direction: column;
      width: 20%;
      height: .55rem;
      align-items: center;
      justify-content: center;
      img {
        width: .41rem;
        height: .41rem;
      }
      span {
        font-size: .12rem;
        color: #555;
      }
    }
  }
  .title_love {
    background-color: white;
    padding: .08rem 0;
    img {
      width: 100%;
    }
  }
  .shoplist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: white;
    // 避免被底部导航覆盖
    padding-bottom: .5rem;
    &_item {
      border-radius: .05rem;
      overflow: hidden;
      width: 46%;
      margin: .06rem 0rem;
      img {
        width: 100%;
      }
      p {
        font-size: .14rem;
        line-height: .175rem;
        font-weight: bold;
        color: #333;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical; // 
        -webkit-line-clamp: 2;
        overflow: hidden;
        padding: 0rem 0.075rem;
        box-sizing: border-box;
        margin-bottom: 0.06rem;
      }
      .cuxiao {
        min-height: .2rem;
        display: flex;
        span {
          font-size: 0.08rem;
          padding: 0.025rem 0.05rem;
          background-color: skyblue;
          color: white;
          margin-left: 0.05rem;
        }
        .hot {
          background-color: rgb(255, 77, 41);
        }
      }
      .moneybox {
        padding: .075rem 0;
        .current_price {
          font-size: .175rem;
          color: #ff4422;
          font-weight: bold;
        }
        .price {
          font-size: .08rem;
          color: #979797;
          margin-left: .1rem;
          text-decoration: line-through;
        }
      }
    }
  }
}
.red_packet {
  position: fixed;
  right: 1.4%;
  top: 43.6%;
  z-index: 999;
  img {
    width: .5rem;
    height: .5rem;
  }
}
</style>